<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>手风琴</title>
  <style>
    ul {
      list-style: none;
    }

    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 1200px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid red;
      overflow: hidden;
    }

    div li {
      width: 240px;
      height: 400px;
      float: left;
      transition: all 500ms;
    }

    div ul {
      width: 1200px;
    }
  </style>
</head>

<body>
  <div id="box">
    <ul>
      <li>
        <a href="#">
          <img src="./images/1.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/2.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/3.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/4.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/5.jpg" alt="">
        </a>
      </li>
    </ul>
  </div>
</body>
<script>
  // 获取元素
  let lis = document.querySelectorAll('li')
  for (let i = 0; i < lis.length; i++) {
    lis[i].addEventListener('mouseenter', function () {
      for (let j = 0; j < lis.length; j++) {
        lis[j].style.width = '100px'
        console.log(lis[j]);
      }
      this.style.width = '800px'
    })
    lis[i].addEventListener('mouseleave', function () {
      for (let i = 0; i < lis.length; i++) {
        lis[i].style.width = '240px'
      }
    })

  }





  // // // 获取元素
  // const box = document.querySelectorAll('li');// lis = [li, li, li, li, li]
  // // 分析：
  // // 1、鼠标进入显示图片，
  // // 鼠标进入li，让当前li变成800，其他的li变成100
  // for (let i = 0; i < box.length; i++) {

  //   box[i].addEventListener('mouseenter', function () {
  //     for (let j = 0; j < box.length; j++) {// 事件触发执行，为了让所有li变成240宽的
  //       box[j].style.width = '100px';
  //     }
  //     this.style.width = '800px'
  //   })

  //   //   box[i].addEventListener('mouseleave', function () {
  //   //     // 让所有的li变成240
  //   //     for (let j = 0; j < box.length; j++) {// 事件触发执行，为了让所有li变成240宽的
  //   //       box[j].style.width = '240px';
  //   //     }
  //   //   })

  // }





</script>

</html>